<template>
  <!-- 轮播图 -->
  <div class="navSwiper">
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { onMounted, reactive, getCurrentInstance } from 'vue'
export default {
  name: 'NavSwiper',
  name: 'Home',
  setup() {
    const images = reactive([])
    const { proxy } = getCurrentInstance()
    // onMounted钩子函数
    onMounted(() => {
      proxy.$axios.get('http://localhost:3000/banner?type=1').then((res) => {
        console.log(res.data)
        let { banners } = res.data
        images.push(...banners);
      })
    });

    return {
      images,
    }
  },
}
</script>
<style lang="less" scoped>
// 轮播图
.navSwiper {
  margin-top: 0.2rem;
  padding: 0.2rem;
  border-radius: 0.1rem;
  .my-swipe {
    border-radius: 0.1rem;
    height: 3rem;
    .van-swipe-item {
      color: #fff;
      text-align: center;
      background-color: #39a9ed;
      width: 7.5rem;
      img {
        max-width: auto;
        max-height: 100%;
      }
    }
  }
}
</style>
